<template>
	<view class="add-address">
		<view class="map">
			<!-- 		地图 -->
		</view>
		<!-- 表单 -->
		<view class="add-form">
			<u--form labelPosition="left" :model="FormData" ref="uForm" labelWidth="70">
				<u-form-item label="地址" prop="address" borderBottom size="small">
					<u-input v-model="FormData.address" placeholder="请选择收货地址" border="none"></u-input>
					<u-icon slot="right" name="map"></u-icon>
				</u-form-item>

				<u-form-item label="街道" prop="street" borderBottom size="small">
					<u-input v-model="FormData.street" placeholder="例:xxx街道" border="none"></u-input>
				</u-form-item>

				<u-form-item label="门牌号" prop="houseNumber" borderBottom>
					<u-input v-model="FormData.houseNumber" disabledColor="#ffffff" placeholder="例:5号楼508室" border="none"></u-input>
				</u-form-item>

				<u-form-item label="收货人" prop="name" borderBottom>
					<u-input v-model="FormData.name" disabledColor="#ffffff" placeholder="请填写收货人姓名" border="none"></u-input>
					<u-radio-group slot="right" v-model="FormData.sex" placement="row" iconSize="12" labelSize="12">
						<u-radio :name="1" activeColor="#f0ad4e" label="先生"></u-radio>
						<u-radio :name="0" activeColor="#f0ad4e" label="女士"></u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="手机号码" prop="mobile" borderBottom ref="item1">
					<u--input v-model="FormData.mobile" disabledColor="#ffffff" placeholder="请输入11位手机号" border="none"></u--input>
				</u-form-item>

				<u-form-item label="标签" borderBottom ref="item1">
					<ul class="tag">
						<li :class="{ active: FormData.type === 0 }" @click="onchangeTag(0)">家</li>
						<li :class="{ active: FormData.type === 1 }" @click="onchangeTag(1)">公司</li>
						<li :class="{ active: FormData.type === 2 }" @click="onchangeTag(2)">学校</li>
						<li :class="{ active: FormData.type === 3 }" @click="onchangeTag(3)">其他</li>
					</ul>
				</u-form-item>

				<u-form-item label="默认地址" prop="isDefault">
					<u-switch size="20" v-model="FormData.isDefault" activeColor="#f0ad4e"></u-switch>
				</u-form-item>
			</u--form>
			<view class="del-btn" style="display: flex; justify-content: center" v-if="FormData.id">
				<button size="mini" type="warn" v-if="FormData.id !== 0" @tap="onDel">删除地址</button>
			</view>
		</view>
		<!-- <view class="weixin-export" v-if="">
			<u-icon slot="right" name="chat" style="margin-right: 10rpx;" color="green"></u-icon>
			微信导入地址
		</view> -->
		<view class="submit-btn">
			<button style="background-color: #f3c45d; color: #fff" @click="onSubmit">保存</button>
		</view>
	</view>
</template>

<script>
import http from '@/common/api.js';
import common from '@/common/util.js';
export default {
	data() {
		return {
			systemInfo: common.getSystemInfo(),
			FormData: {
				isDefault: false,
				type: 0,
				sex: 1,
				id: 0,
				name: '',
				address: '',
				mobile: '',
				linkMan: '',
				street: '',
				houseNumber: ''
			}
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	onLoad({ id }) {
		// console.log(id);
		this.FormData.id = id;
		if (id) {
			this.onDetail({
				id: id
			});
		}
	},
	methods: {
		onchangeTag(i) {
			this.FormData.type = i;
		},
		// 修改数据详情
		async onDetail(id) {
			const { data } = await http.getAddressDetail(id);
			// console.log(data);
			this.FormData = data;
		},

		// 提交数据
		onSubmit() {
			if (!this.FormData.address) {
				this.$u.toast('请输入地址');
				return;
			}
			if (!this.FormData.name) {
				this.$u.toast('请输入收货人名字');
				return;
			}
			if (!this.FormData.mobile || !/^1\d{10}$/.test(this.FormData.mobile)) {
				this.$u.toast('请输入正确的手机号码');
				return;
			}
			// let _that = this
			http.addAddressAPI(this.FormData).then((res) => {
				// console.log(res);
				if (res.status) {
					uni.navigateBack();
				} else {
					this.$u.toast({
						type: 'error',
						icon: false,
						title: '失败主题',
						message: '操作失败'
					});
				}
			});
		},
		// 删除地址
		onDel() {
			const _that = this;
			if (_that.FormData.isDefault)
				return uni.showToast({
					icon: 'error',
					title: '默认地址不能删除'
				});
			uni.showModal({
				title: '温馨提示',
				content: '确认删除地址吗',
				async success() {
					await _that.$api.deleteAddress({ id: _that.FormData.id });
					uni.navigateBack();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.add-address {
	height: 100vh;

	.map {
		height: 300rpx;
		line-height: 300rpx;
		background-color: #f0ad4e;
	}

	.add-form {
		width: 90%;
		position: absolute;
		left: 30rpx;
		top: 280rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.tag {
		display: flex;
		align-items: center;

		li {
			width: 70rpx;
			line-height: 35rpx;
			font-size: 11px;
			background-color: #c9cacd;
			margin-right: 20rpx;
			text-align: center;
			border-radius: 15rpx;
		}
	}

	.active {
		background-color: #f0ad4e !important;
		color: #fff;
	}

	.weixin-export {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: gray;
		font-size: 10px;
		width: 30%;
		line-height: 50rpx;
		margin: 0 auto;
		text-align: center;
		margin-top: 580rpx;
		border-radius: 50rpx;
	}

	.submit-btn {
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		padding: 30rpx;
	}
}
</style>
